<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../easyui-config.js"></script>
    <script type="text/javascript" src="json-data.js"></script>

</head>
<body>
    <div>
        <table id="dg" style="width:600px;height:400px;"></table>
        <script>
            $(() => {
                $.extend($.fn.datagrid.defaults.editors, {
                    text: {
                        init: function (container, options) {
                            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
                            return input;
                        },
                        destroy: function (target) {
                            $(target).remove();
                        },
                        getValue: function (target) {
                            return $(target).val();
                        },
                        setValue: function (target, value) {
                            $(target).val(value);
                        },
                        resize: function (target, width) {
                            $(target)._outerWidth(width);
                        }
                    }
                });

                $("#dg").datagrid({
                    data: data
                    , rownumbers: true
                    , singleSelect: false
                    , multiple: true
                    , checkOnSelect: true
                    , selectOnCheck: true
                    , collapsible: true
                    , fitColumns: false

                    , idField: 'itemid'
                    , sortName: 'listprice'
                    , sortOrder: 'desc'
                    , multiSort: true
                    , remoteSort: false
                    , columns: [[
                        { field: '', checkbox: true },
                        { field: 'itemid', title: 'Item ID', width: 80 },
                        {
                            field: 'productid', title: 'Product ID', width: 120,
                            formatter: function (value, row) {
                                return row.productname;
                            },
                            editor: {
                                type: 'combobox',/* text,textbox,numberbox,numberspinner, combobox,combotree,combogrid,datebox,datetimebox, timespinner,datetimespinner, textarea,checkbox,validatebox */
                                options: {
                                    valueField: 'productid',
                                    textField: 'productname',
                                    method: 'get',
                                    url: null,
                                    data: data.rows.map(item => { return { productid: item.productid, productname: item.productname } }),
                                    required: true
                                }
                            }
                        },
                        {
                            field: 'listprice'
                            , title: 'List Price'
                            , width: 80
                            , align: 'left'  /* 'left','right','center'  */
                            , halign: 'left' /* 'left','right','center' */
                            , sortable: true /* 该列可排序 */
                            , order: 'desc'
                            , rowspan: 1
                            , colspan: 1
                            , resizable: true /* 可调整列宽 */
                            , fixed: void (0) /* true:禁用 fitColumns 为true时自动调整列宽 */
                            , hidden: false /* 设置隐藏列 */
                            , checkbox: false /* 复选框列 */
                            , formatter: function (value, row, index) {
                                if (row.user) {
                                    return row.user.name;
                                } else {
                                    return value;
                                }
                            }
                            , styler: function (value, row, index) {
                                if (value < 20) {
                                    return 'background-color:#ffee00;color:red;';
                                    // the function can return predefined css class and inline style
                                    // return {class:'c1',style:'color:red'}
                                }
                            }
                            , hformatter: function (title, col) {
                                if (title) {
                                    return '价格';
                                } else {
                                    return title;
                                }
                            }
                            , hstyler: function (title, col) {
                                return { class: 'c1', style: 'color:red' }
                            }
                            , sorter: function (a,b){
								a = parseFloat(a);
								b = parseFloat(b);
								return a==b?0:(a>b?1:-1);
							}
                        },
                        { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
                        { field: 'attr1', title: 'Attribute', width: 250 },
                        {
                            field: 'status', title: 'Status', width: 60, align: 'center',

                            editor: {
                                type: 'text'
                            }
                        }
                    ]]
					
					,onLoadSuccess:function(data){
						console.log('加载成功');
					}
					,onLoadError:function(){
						console.log('加载失败');
					}
					,onBeforeLoad:function(param){
						console.log('加载前',param);
					}
					,onClickRow:function(index,row){
						console.log('单击行',index,row);
					}
					,onDblClickRow:function(index,row){
						console.log('双击行',index,row);
					}
					,onClickCell:function(index,field,value){
						console.log('单击单元格',index,field,value);
					}
					,onDblClickCell:function(index,field,value){
						
					}
					,onBeforeSortColumn:function(sort,order){
							
					}
					,onSortColumn:function(sort,order){
							
					}
					,onResizeColumn:function(field,width){
							
					}
					,onBeforeSelect:function(index,row){
							
					}
					,onSelect:function(index,row){
							
					}
					,onBeforeUnselect:function(index,row){
							
					}
					,onUnselect:function(index,row){
							
					}
					,onSelectAll:function(rows){
							
					}
					,onUnselectAll:function(rows){
							
					}
					,onBeforeCheck:function(index,row){
							
					}
					,onCheck:function(index,row){
							
					}
					,onBeforeUncheck:function(index,row){
							
					}
					,onUncheck:function(index,row){
							
					}
					,onCheckAll:function(rows){
							
					}
					,onUncheckAll:function(rows){
							
					}
					
					,onBeforeEdit:function(index,row){
							
					}
					,onBeginEdit:function(index,row){
							
					}
					,onEndEdit:function(index,row){
							
					}
					,onAfterEdit:function(index,row){
							
					}
					,onCancelEdit:function(index,row){
							
					}
					,onHeaderContextMenu:function(e,field){
							
					}
					,onRowContextMenu:function(	e,index,row){
							
					}
					
                });
            });
        </script>

    </div>
</body>
</html>